<mat-sidenav-container class="page-container" [class.dark-theme]="theme">
  <!-- 左侧导航栏 -->
  <mat-sidenav #drawer fixedInViewport [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false">
    <mat-toolbar>
      <img class="logo" src="assets/images/logo.png" alt="">
    </mat-toolbar>
    <mat-nav-list color="accent">
      <a mat-list-item routerLink="/site-summary">
        <mat-icon aria-hidden="false" aria-label="Example search icon">search</mat-icon>站点汇总
      </a>
      <a mat-list-item (click)="showMatTree = !showMatTree">
        <mat-icon aria-hidden="false" aria-label="Example list icon">lan</mat-icon>
        站点列表
      </a>
      <mat-tree class="mat-tree" *ngIf="showMatTree" [dataSource]="dataSource" [treeControl]="treeControl">
        <mat-tree-node class="mat-tree-node" *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding
          matTreeNodePaddingIndent="20">
          <button class="mat-icon-button" mat-icon-button disabled></button>
          <a [routerLink]="['/site-list/' + node.name]" routerLinkActive="nav-item">{{node.name}}</a>
        </mat-tree-node>

        <mat-tree-node class="mat-tree-node" *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding
          matTreeNodePaddingIndent="20">
          <button class="mat-icon-button" mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">
            <mat-icon class="mat-icon-rtl-mirror">
              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
            </mat-icon>
          </button>
          <span>{{node.name}}</span>
        </mat-tree-node>
      </mat-tree>
      <a mat-list-item routerLink="/start-stop">
        <mat-icon aria-hidden="false" aria-label="Example power_settings_new icon">power_settings_new</mat-icon>一键启停
      </a>
      <a mat-list-item routerLink="/site-config">
        <mat-icon aria-hidden="false" aria-label="Example settings_suggest icon">settings_suggest</mat-icon>
        站点配置
      </a>
    </mat-nav-list>




  </mat-sidenav>

  <!-- 右侧内容区 -->
  <mat-sidenav-content>
    <!-- 头部工具栏 -->
    <mat-toolbar color="primary" class="header">
      <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>智慧锂电储能EMS</span>
      <!-- 占位块 -->
      <span class="example-spacer"></span>
      <!-- 全屏 -->
      <button mat-icon-button class="example-icon favorite-icon" (click)="openFullscreen()">
        <mat-icon *ngIf="!fullscreen; else elseBlock" aria-hidden="false">fullscreen</mat-icon>
        <ng-template #elseBlock>
          <mat-icon aria-hidden="false">fullscreen_exit</mat-icon>
        </ng-template>
      </button>
      <!-- 头像ICON -->
      <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
        <mat-icon class="account_circle" aria-hidden="false">account_circle</mat-icon>
      </button>
      <span class="user-info">
        <span>{{userInfo.username}}</span>
        <span>{{userInfo.role}}</span>
      </span>

      <!-- 更多功能 -->
      <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
        <mat-icon>more_vert</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item (click)="toggleTheme('dark')">
          <mat-icon>dark_mode</mat-icon>
          <span>深色模式</span>
        </button>
        <button mat-menu-item (click)="toggleTheme('light')">
          <mat-icon>light_mode</mat-icon>
          <span>浅色模式</span>
        </button>
        <button mat-menu-item>
          <mat-icon>notifications_off</mat-icon>
          <span>do something</span>
        </button>
      </mat-menu>
    </mat-toolbar>

    <!-- 路由出口 -->
    <div class="router-content">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>
